<div class="layui-fluid" lay-title="表单组合">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="roleName" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">显示顺序</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNum" lay-verify="required|number" autocomplete="off" placeholder="请输入显示顺序" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">有效</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="有效" checked="">
                        <input type="radio" name="status" value="0" title="无效">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">选择权限</label>
                    <div class="layui-input-block">
                        <div id="LAY-auth-tree-index"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'api', 'admin', 'form', 'authtree', 'laydate', 'layer'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , api = layui.api
            , laydate = layui.laydate
            , form = layui.form
            , admin = layui.admin
            , authtree = layui.authtree;
        var sysRole = {};
        var roleId = POPUP_DATA.roleId;
        var table = POPUP_DATA.table;

        form.render(null, 'form-group');

        laydate.render({
            elem: '#form-group-date'
        });
        if(!roleId){
            roleId="";
        }
        // 初始化
        admin.get({
            type: 'get',
            url: '/sysMenu/listAuth?roleId=' + roleId + '&token=' + admin.loginToken,
            dataType: 'json',
            success: function (data) {
                sysRole = data.sysRole;
                if (sysRole) {
                    form.val("form-group", {
                        "roleName": sysRole.roleName // "name": "value"
                        , "status": sysRole.status
                        , "orderNum": sysRole.orderNum
                    });
                }
                var trees = authtree.listConvert(data.sysMenuList, {
                    primaryKey: 'id'
                    , startPid: 0
                    , parentKey: 'parentId'
                    , nameKey: 'name'
                    , valueKey: 'id'
                    , checkedKey: data.menuIdList
                });
                // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
                authtree.render('#LAY-auth-tree-index', trees, {
                    inputname: 'authids[]'
                    , layfilter: 'lay-check-auth'
                    , autoclose: false
                    // ,autochecked: false
                    , openchecked: false
                    //,openall: true
                    , autowidth: true
                });
            }
        });

        /* 监听提交 */
        form.on('submit(form-group-submit)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
             title: '最终的提交信息'
             })*/
            var authids = authtree.getChecked('#LAY-auth-tree-index');
            console.log('Choosed authids is', authids);
            var field = data.field;
            var roleDate = {};
            var url = "/sysRole/save";
            if (roleId) {
                url = "/sysRole/update?_method=PUT";
                roleDate.id = roleId;
            }
            roleDate.roleName = field.roleName;
            roleDate.status = field.status;
            roleDate.orderNum = field.orderNum;
            roleDate.menuIds = authids.join(",");

            if (!$(".layui-btn").hasClass("layui-btn-disabled")) {
                $(".layui-btn").addClass("layui-btn-disabled");
                layer.close(index);
                //layer.msg('处理中...',{shade:[0.8, '#393D49'],time:60*60*1000});

                admin.post({
                    url: url,
                    contentType: "application/json",
                    data: JSON.stringify(roleDate),
                    success: function (res) {
                        $(".layui-btn").removeClass("layui-btn-disabled");
                        if (res.code == 0) {
                            // 提醒保存成功，关闭当前弹窗
                            layer.msg(res.msg);
                            layer.closeAll();
                            //刷新
                            table.reload('list-table-role', {
                                url: '/sysRole/page?token=' + admin.loginToken,
                                page: {
                                    curr: 1
                                }
                            })
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
            }

            return false;
        });
    });
</script>